<template>
    <div class="product-list">
        <div class="swiper my-swiper" ref="mySwiper">
            <div class="swiper-wrapper">
                <template v-for="item in list">
                    <div class="swiper-slide" :key="item.bannerid" v-if="item.flag" >
                        <img :src="item.img" alt="">
                    </div>
                </template>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </div>
</template>

<script>

/* 
    在项目中使用swiper
    1. 先下载
    npm i swiper -S

    2. 引入JS和样式
    script
        import Swiper from "swiper";

    style
        @import url("swiper/css/bundle");

    3. 添加swiper结构

    4. 设置容器大小

    5. 初始化Swiper => 放在数据请求成功->页面重新渲染完毕之后
        new Swiper('.swiper', {

        })

 
 
 
 
 
*/


import { getBannerListAPI } from '@/api/banner';

// 引入swiper及其相关组件
// Swiper => swiper模块暴露的默认值
// Autoplay,Pagination,Navigation相关组件  => 按需引入
import Swiper,{Autoplay,Pagination,Navigation} from "swiper";


export default {
    name: "BannerShowView",
    data() {
        return {
            list: [],
            mySwiper: null,
        }
    },
    methods: {
        async getBannerList() {
            try {
                var res = await getBannerListAPI();
                console.log("轮播列表请求成功", res);
                this.list = res.data;
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        initSwiper() {
            this.mySwiper = new Swiper(this.$refs.mySwiper, {
                // direction: 'vertical', // 垂直切换选项
                
                loop: true, // 循环模式选项
                // autoplay:true,
                autoplay:{
                    delay:3000,
                    pauseOnMouseEnter:true,
                },

                // 在 Swiper 的上启用动态检查器(Mutation Observer)，如果你更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）
                observer:true,

                // 将动态检查器(Mutation Observer)应用于Swiper 的所有祖先元素。当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper 并触发 observerUpdate 事件。
                observeParents:true,

                modules:[Autoplay,Pagination,Navigation],

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable:true,
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    },
    watch:{
        list(newVal){
            console.log("list数据改变",newVal);
            // this.initSwiper();   // 此处初始化的时机不对 -> 由于Vue响应式 ->数据发生改变之后 -> 视图重新渲染 => 也是异步的

            this.$nextTick(()=>{
                this.initSwiper();
            })
        }
    },
    mounted() {
        this.getBannerList();  // 请求数据是异步的, 数据请求成功到页面重新渲染也是异步的
        // this.initSwiper();    此处初始化的时机不对
    }
}
</script>

<style scoped>
/* css2.1   => 局部引入 -> 只对当前页面生效*/
/* @import url("swiper/swiper-bundle.min.css"); */
@import url("swiper/css/bundle");

.my-swiper {
    width: 100%;
}

.my-swiper img{
    width: 100%;
}
</style>